import { useState } from "react";
import {Link} from "react-router-dom"

import XSVg from "../../../components/svgs/X";

import {MdOutlineMail} from "react-icons/md"
import {MdPassword} from "react-icons/md"

import {useMutation, useQueryClient} from "@tanstack/react-query"

const LoginPage = () => {
    const [formData, setFormData] = useState({
        username: "",
        password: "",
    })

    const queryClient = useQueryClient()

    const {
        mutate: loginMutation,
        isPending,
        isError,
        error,
    } = useMutation({
        mutationFn: async({username, password}) => {
            try {
                const res = await fetch("/api/auth/login", {
                    method: "POST",
                    headers: {
                        "Content-Type": "applications/json",
                    },
                    body: JSON.stringify({username, password})
                })

                const data = await res.json()

                if (!res.ok) {
                    // TODO: not a good style of tracing error
                    throw new Error(data.error || "Something went wrong")
                }
            }catch(error) {
                throw new Error("Error in LoginPage.jsx: " + error)
            }
        },

        onSuccess: () => {
            // refresh the authUser
            queryClient.invalidateQueries({
                queryKey: ["authUser"],
            })
        },
    })

    const handleSubmit = (e) => {
        e.preventDefault()
        loginMutation(formData)
    }

    const handleInputChange = (e) => {
        setFormData({
            ...formData, 
            [e.target.name]: e.target.value
        })
    }
    // TODO: fix this comp
    return (
        <div>

        </div>
    )
}

export default LoginPage